<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .expand-transition{
            transition: all 1s ease;
            height: 30px;
            padding: 10px;
            background-color: #eee;
            overflow: hidden;
        }
        /*.expand-enter{*/
            /*height: 100px;*/
        /*}*/
        .expand-leave{
            height: 0;
            padding: 0 10px;
            opacity: 0;
        }
    </style>
    <script src="resource/js/vue.js"></script>
</head>
<body>
<div id="app">
    <div v-show="show" transition="expand">hello</div>
    <button v-on:click="toggle">Toggle</button>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            show: false,
            transition: 'fade'
        },
        methods:{
            toggle:function(){
                this.show = !this.show;
            }
        },
        transitions:{
            expand:{
                beforeEnter: function(el){
                    el.textContent = 'beforeEnter'
                },
                enter: function(el){
                    el.textContent = 'enter'
                },
                afterEnter: function (el) {
                    el.textContent = 'afterEnter'
                },
                enterCancelled: function(el){

                },
                beforeLeave: function(el){
                    el.textContent = 'beforeLeave'
                },
                leave: function(el){
                    el.textContent = 'leave'
                },
                afterLeave: function(el){
                    el.textContent = 'afterLeave'
                },
                leaveCancelled: function (el) {

                }
            }
        }
    })
</script>
</body>
</html>